<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <el-select popper-class="ft-main-pool-select "
                   :disabled="disabled"
                   v-if="editable"
                   v-model="customerInfo"
                   value-key="customerName"
                   :remote-method="loadCustomerList"
                   :placeholder="placeholder"
                   :remote="true"
                   filterable
                   @change="selectCustomer"
                   :clearable="clearable"
                   :popper-append-to-body="popperAppendToBody"
                   :loading="loading">
            <el-option
                    v-for="item in customerList"
                    :key="item.customerName"
                    :label="item.customerName"
                    :value="item">
                <span>{{item.customerName}}</span>
                <div style='color:#8492a6'>
                    <span>{{item.identityNo}}</span>
                </div>
            </el-option>
        </el-select>
        <span v-if="!editable&&customerInfo">{{customerInfo.customerName}}</span>
    </div>
</template>

<script>
    export default {
        name: "FtMainPoolSelect",
        props: {
            placeholder: {
                type: String,
                default: '请选择客户'
            },
            value: {
                type: String
            },
            editable: {
                type: Boolean,
                default: true
            },
            disabled: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            },
            popperAppendToBody: {
                type: Boolean,
                default: true
            }
        },
        mounted() {
             this.loadCustomerList()
        },
        data() {
            return {
                customerList: [],
                customerInfo: null,
                customerId: this.value,
                loading: true,
            }
        },
        methods: {

            loadCustomerList(filter) {
                this.loading = true;
                const url = '/joys-rest/ncls-cms/custInfo/poolCustomer/'
                this.$http.post(url, filter, {
                    headers: {'Content-Type': 'text/plain'}
                }).then(resp => {
                        this.customerList = resp.body
                    }, resp => {
                        this.$message.error(resp.body.message)
                    }
                ).finally(() => {
                    this.loading = false;
                })
            },
            selectCustomer() {
                    this.customerName = this.customerInfo.customerName
                    this.$emit('input', this.customerInfo.customerName)
                    this.$emit('change', this.customerInfo)
            },
        }
    }
</script>

<style>
    .ft-main-pool-select .el-select-dropdown__item {
        padding: 4px 20px;
        font-size: 14px;
        line-height: 21px;
        height: auto;
    }
</style>
